<template>
	<view class="service"  v-for="(item,index) in storeList" :key="index" @click="bindServiceInfo(item)">
		<image :src="item.outPic" class="pic" mode=""></image>
		<view class="right">
			<view class="top">
				<text class="title">{{item.storeName}}</text>
				<text class="sub-title">{{item.addressInfo}}</text>
				
			</view>
			<view class="bottom">
				<text class="distance">{{(item.distinct/1000).toFixed(2)}}km</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app'
import { ref } from 'vue';
	const storeList = ref()
	onLoad(()=>{
		storeList.value = uni.getStorageSync('storeList')
	})
	/** 服务详情 */
	const bindServiceInfo = (item)=>{
		uni.navigateTo({
			url:"/pages/storeInfo/storeInfo?id="+item.storeId
		})
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	}
	.service{
		width: 630rpx;
		padding: 36rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		display: flex;
		margin: 18rpx auto;
		.pic{
			background: pink;
			display: block;
			width: 178rpx;
			height: 178rpx;
			background: #EDEDED;
			margin-right: 24rpx;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 2;
			.top{
			
				.title{
					font-weight: bold;
					font-size: 30rpx;
					color: #16191B;
				}
				.sub-title{
					color: #8E8E8E;
					font-size: 26rpx;
					display: block;
					margin-top: 12rpx;
				}
			}
			.bottom{
				.distance{
					font-size: 26rpx;
					color: #FE9B23;
				}
			}
		}
		
	}
</style>